import './App4.scss';
//引入图片
import shui from './imgs/shui.png'

import Top from './components/Top'
import Input from './components/Input'
import Bottom from './components/Bottom'

import { Fenlie } from './utils/aip'
import { Fenlie_Two } from './utils/aip'



import React, { Component } from 'react';

class App4 extends Component {
    constructor(props) {
        super(props);
        this.state = {
            currentIndex: 0,
            arr: [
                // {
                //     name: '活动专区',
                //     list: [
                //         { name: '活动专区1', pic: shui },
                //         { name: '活动专区2', pic: shui },
                //         { name: '活动专区3', pic: shui },
                //         { name: '活动专区4', pic: shui },
                //         { name: '活动专区5', pic: shui },
                //         { name: '活动专区6', pic: shui },
                //         { name: '活动专区7', pic: shui },
                //         { name: '活动专区8', pic: shui },
                //         { name: '活动专区9', pic: shui },
                //     ]
                // },
                // {
                //     name: '美容护肤',
                //     list: [
                //         { name: '美容护肤1', pic: shui },
                //         { name: '美容护肤2', pic: shui },
                //         { name: '美容护肤3', pic: shui },
                //         { name: '美容护肤4', pic: shui },
                //         { name: '美容护肤5', pic: shui },
                //         { name: '美容护肤6', pic: shui },
                //     ]
                // },
                // {
                //     name: '彩妆',
                //     list: [
                //         { name: '彩妆1', pic: shui },
                //         { name: '彩妆2', pic: shui },
                //         { name: '彩妆3', pic: shui },
                //         { name: '彩妆4', pic: shui },
                //         { name: '彩妆5', pic: shui },
                //         { name: '彩妆6', pic: shui },
                //     ]
                // },
                // {
                //     name: '香水',
                //     list: [
                //         { name: '香水1', pic: shui },
                //         { name: '香水2', pic: shui },
                //         { name: '香水3', pic: shui },
                //         { name: '香水4', pic: shui },
                //         { name: '香水5', pic: shui },
                //         { name: '香水6', pic: shui },
                //     ]
                // },

            ]
        }
        this.handleClick.bind(this);
    }

    componentDidMount() {
        Fenlie().then((ok) => {
            console.log(ok.data)
            this.setState({ arr: ok.data.list })
        })
        Fenlie_Two({ id: this.state.currentIndex }).then((ok) => {
            console.log(ok.data)
            this.setState({
                id: ok.data.subcate.subcategory
            })
            console.log(this.state.id)
        })
    }


    handleClick(index) {
        this.setState({
            currentIndex: index
        }, () => {
            console.log(this.state.currentIndex);
        })
        // category_sbucate({ id: item.id }).then((ok) => {
        //     console.log(ok.data)
        // })
    }

    render() { //渲染组件模板到视图
        return (
            <>
                {/* 渲染Top组件 */}
                <Top />
                {/* 渲染Input组件 */}
                <Input />
                <div className="chao">
                    <div className="div left">
                        {
                            this.state.arr.map((item, index) => {
                                return (
                                    <div key={index} className={`btn ${this.state.currentIndex == index ? 'active' : ''}`} onClick={() => {
                                        this.handleClick(index)
                                    }}>{item.name}</div>
                                )
                            })
                        }
                    </div>
                    <div className="right">
                        {/* 渲染右侧列表 */}
                        {/* {
                            this.state.arr[this.state.currentIndex].list.map((item, index) => {
                                return (
                                    <div className="item">
                                        <img src={item.pic} />
                                        <div className="name">{item.name}</div>
                                    </div>
                                )
                            })
                        } */}
                    </div>
                </div>
                {/* 渲染底部导航组件 */}
                <Bottom />
            </>
        )
    }
}

export default App4;